<template>
  <div class="vx-transfer">
    <div class="payment-info">
      <ui-row type="flex" class="row-bg" justify="center">
        <ui-col :span="8">
          <vx-bank-card :bgSrc="payerImg" :accountName="payerName" :accountNo="payerNum" :bankName="payerBankName">
            <span class="title" v-if="showTitle">{{ payerTitle }}</span>
          </vx-bank-card>
        </ui-col>
        <ui-col :span="8">
          <div class="middle-info" :style="{ paddingTop: showTitle ? '55px' : '30px' }">
            <div class="flex-bt">
              <div class="transfer-amount" v-if="isTransAmt">
                {{ transText }}（元）
                <div class="transfer-amount-num">￥{{ payerMoney | numberFilter(2) }}</div>
              </div>
              <div class="handing-fee" v-if="payerService">
                手续费（元）
                <div class="transfer-amount-num">￥{{ payerService | numberFilter(2) }}</div>
              </div>
              <div class="transfer-amount" v-if="!isTransAmt">
                定制金额（元）
                <div class="transfer-amount-num">￥{{ payerMoney | numberFilter(2) }}</div>
              </div>
            </div>
            <div class="img-c">
              <img src="@/assets/image/transferRemit/group.png" alt class="middle-info-line" />
            </div>
          </div>
        </ui-col>
        <ui-col :span="8">
          <vx-bank-card :bgSrc="payeeImg" :accountName="payee" :accountNo="payeeNum" :bankName="payeeBankName">
            <span v-if="showTitle">{{ payeeTitle }}</span>
          </vx-bank-card>
        </ui-col>
      </ui-row>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'vx-transfer',
  props: {
    transText: {
      type: String,
      default: '转账金额',
    },
    payerName: {
      type: String,
      default: '',
      required: true,
    },
    payerNum: {
      type: String,
      default: '',
      required: true,
    },
    payerMoney: {
      type: [String, Number],
      default: '',
      required: true,
    },
    payerBankName: {
      type: String,
      default: '',
      required: true,
    },
    payerService: {
      type: [String, Number],
      default: '',
      required: false,
    },
    payee: {
      type: String,
      default: '',
      required: true,
    },
    payeeNum: {
      type: String,
      default: '',
      required: true,
    },
    payeeBankName: {
      type: String,
      default: '',
      required: true,
    },
    payerImg: {
      type: String,
      default: 'BOC',
    },
    payeeImg: {
      type: String,
      default: 'SPDB',
    },
    isTransAmt: {
      type: Boolean,
      default: true,
    },
    showTitle: {
      type: Boolean, // 是否展示标题  收款方 付款方
      default: true,
    },
    payerTitle: {
      type: String,
      default: '付款方信息',
    },
    payeeTitle: {
      type: String,
      default: '收款方信息',
    },
  },
};
</script>

<style lang="scss">
.vx-transfer {
  .payment-info {
    .ui-col {
      display: flex;
      justify-content: center;
    }
    .left-info-title {
      display: flex;
      justify-content: center;
      margin-top: -36px;
      color: #3b4c87;
    }
    .left-info {
      background-color: #b84b5b;
      width: 73%;
      height: 120px;
      border: 1px solid #d1d1d1;
      padding: 10px 15px;
      border-radius: 10px;
      box-sizing: border-box;
    }
    .right-info {
      background-color: #32589a;
      width: 73%;
      height: 120px;
      border: 1px solid #d1d1d1;
      padding: 10px 15px;
      border-radius: 10px;
      box-sizing: border-box;
    }
    .left-info-content {
      margin-left: 5px;
      color: #f7ebed;
      font-size: 14px;
      .top-flex {
        display: flex;
        align-items: center;
      }
      img {
        float: left;
        margin-right: 8px;
        width: 40px;
        height: 40px;
      }
      .left-info-content-acname {
        padding-top: 8px;
      }
      .left-info-content-acno {
        margin-left: 1px;
        margin-top: 5px;
      }
      .left-info-content-allname {
        margin-top: 20px;
        font-size: 12px;
      }
    }
    .middle-info {
      box-sizing: border-box;
      padding-top: 10px;
      .img-c {
        text-align: center;
      }
      .flex-bt {
        display: flex;
        justify-content: space-between;
      }
      .transfer-amount {
        float: left;
        font-size: 13px;
        .transfer-amount-num {
          font-size: 16px;
          font-weight: bold;
          color: #bb5261;
        }
      }
      .handing-fee {
        font-size: 13px;
        .transfer-amount-num {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .middle-info-line {
        margin: 20px 0px;
      }
    }
  }
  .trans-postscript {
    width: 40%;
    font-size: 14px;
    margin: 4px auto;
    box-sizing: border-box;
    padding-left: 10%;
    font-weight: 300;
    text-align: left;
    color: #000000;
    margin-bottom: 10px;
    .trans-postscript-text {
      margin-left: 20px;
      color: #555555;
      font-weight: bold;
      font-size: 13px;
      line-height: 26px;
    }
  }
}
</style>
